<template>
	<view class="app">
	<view class="order-item" v-for="item in orderList" :key="item.id">
		<view class="order-td">
			<view class="order-td-left" @click="business(item.store.id)"><image :src="item.store.logo" mode="widthFix"></image><text>{{item.store.name}}</text> </view>
			<view class="order-td-right">{{item.order_desc}}<text class="iconfont icon-jinrujiantouxiao"></text></view>
		</view>
    <view class="order_time">{{item.create_time}}</view>
    <u-scroll-list :indicator="false">
            <view v-for="el in item.goods" :key="el.id" class="image_list" @click="details(item.id)">
                <image class="img" :src="el.goods_image" mode="widthFix"></image>
            </view>
        </u-scroll-list>
        <view class="flex_right">
          <view class="flex-footer">
            <text style="color: #000;margin-right: 20rpx;">共{{item.goods.length}}件</text>
              <text style="color: #000;">实付￥</text><text style="color: #000;font-weight: bold;">{{item.order_amount}} </text>
            </view>
        </view>
		<view class="order-td-footer">
			<u-button type="primary" @click="cancellation(item.id,item.order_state,item.goods,item.refund_id)" :plain='true' shape='circle' size="small">{{btnstate[item.order_state][0]}}</u-button>
			<text v-if="btnstate[item.order_state][1]"></text>
			<u-button type="primary" shape='circle' size="small" v-if="btnstate[item.order_state][1]" @click="rightside(item.id,item.order_state)">{{btnstate[item.order_state][1]}}</u-button>
		</view>
	</view>
	<u-modal :show="cancel" width="500rpx" @confirm="outpay" :closeOnClickOverlay="true" @close="cancel = false">
		<text>亲~确定要取消您的订单吗？</text>
	</u-modal>
	<u-toast ref="uToasts"></u-toast>
	</view>
</template>

<script>
	import {ordercancel,soonpay} from '@/api/place.js'
	export default{
		props:{
			orderList:{
				type:Array,
				default:() => []
			}
		},
		data(){
			return{
				cancel:false,
				payid:null,
				btnstate:{
					0:['重新购买'],
					10:['取消订单','立即支付'],
					20:['申请退款'],
					30:['申请退款','确认收货'],
					31:['退款进度'],
					40:['申请退款','再来一单']
				},
				params:{}
			}
		},
		methods:{
			business(id){
				uni.navigateTo({
					url:'/page_detailsbtn/index/index?id='+id
				})
			},
			details(id){
				uni.navigateTo({
					url:'/page_payment/index?id='+id
				})
			}, 
			async soonapi(id){
				const {data} = await soonpay(id)
				this.params = data.params
			},
			async cancellation(id,state,goods,refund){
				this.payid = id
				//重新购买
				if(state === 0){
					const arr = goods.map(el => ({number: el.goods_number, id: el.goods_id}))
					uni.navigateTo({
						url:`/page_ orderform/index?info=${JSON.stringify({
							type:1,
							goods:arr
						})}`
					})
				}
				// 取消订单
				if(state === 10) this.cancel = true
				//申请退款
				if(state === 20){
					uni.navigateTo({
						url:'/page_allorders/page_refund/index?id='+id
					})
				}
				//退款进度
				if([31,32,33].includes(state)){
					uni.navigateTo({
						url:'/page_allorders/page_progress/index?id='+refund
					})
				}
			},
			async rightside(id,state){
				await this.soonapi(id)
				//立即支付
				if(state == 10){
				uni.requestPayment({
					...this.params,
					success(res) {
						uni.showToast({
						  title: '支付成功',
						  icon: 'success',
						})
					},
					fail(err){
						uni.showToast({
						  title: '支付失败',
						  icon: 'error'
						})
					}
				})
				}
			},
			async outpay(){
				await ordercancel(this.payid)
				this.cancel = false
				this.$refs.uToasts.show({
					message: "订单已取消"
				})
				this.$emit('payobj')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-item{
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow:hidden; 
		margin-top: 20rpx;
		.order-td{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.order-td-left{
				display: flex;
				align-items: center;
				font-size: 32rpx;
				image{
					width: 80rpx;
					height: 80rpx;
					flex-shrink: 0;
					margin-right: 16rpx;
				}
			}
			.order-td-right{
				font-size: 32rpx;
				font-weight: bold;
				color: #025E21;
				.icon-jinrujiantouxiao{
					font-size: 30rpx;
					margin-left: 18rpx;
				}
			}
		}
    .order_time{
      color: #999;
      font-size: 24rpx;
      margin-bottom: 20rpx;
    }
    .image_list{
      .img{
        width: 200rpx;
        height:200rpx;
        border-radius: 10rpx;
        margin-right: 16rpx;
      }
    }
    .flex_right{
      display: flex;
      justify-content: flex-end;
      margin-bottom: 20rpx;
    }
		.order-td-footer{
			display: flex;
			float: right;
			text{
				margin-left: 16rpx;
			}
		}
	}
</style>